<template lang="pug">
  .alertWrapper(:class="[type, size]")
    .title
      i(:class="icon" v-if="showIcon")
      slot(name="title") {{title}}
    .message
      slot(name="message") {{message}}
</template>
<script>
export default {
  name: 'Alert',
  props: {
    type: {
      type: String,
      default: 'info'
    },
    title: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: ''
    },
    message: {
      type: String,
      default: ''
    },
    showIcon: {
      type: Boolean,
      default: false
    }
  },
  data () {
    let icon = ''
    switch (this.type) {
      case 'warning':
        icon = 'el-icon-warning'
        break
      case 'success':
        icon = 'el-icon-success'
        break
      case 'error':
        icon = 'el-icon-error'
        break
      default:
        icon = 'el-icon-info'
    }
    return {
      icon
    }
  },
  create () {
    console.log(this)
  }
}
</script>
<style lang="scss">
.alertWrapper {
  position: relative;
  padding: 15px;
  color: rgba(0,0,0,.65);
  line-height: 1.5;
  border-radius: 4px;

  &.small{
     padding: 8px 12px;
  }

  .title {
    color: $--color-text-primary;
    font-size: 16px;
  }

  .message {
    color: $--color-text-regular;
    font-size: 14px;

    p {
      margin: 5px 0
    }
  }

  &.info {
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;

    i {color: #1890ff;}
  }

  &.success {
    background-color: #f6ffed;
    border: 1px solid #b7eb8f;

    i {color: #52c41a;}
  }

  &.warning {
    background-color: #fffbe6;
    border: 1px solid #ffe58f;

    i {color: #faad14;}
  }

  &.error {
    background-color: #fff1f0;
    border: 1px solid #ffa39e;

    i {color: #f5222d;}
  }

}

</style>
